<template>
    <div class="goods-library">
        <search-form :searchArray="searchArray" :searchObj="searchObj" @search="getList">
            <el-button class="search mL20">新增</el-button>
        </search-form>
        <elTable :formData="formData" @getList="getList" ref="dataInfo">
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <el-table-column prop="type" label="名称" align="center"></el-table-column>
                <el-table-column prop="group" label="所属分类" align="center"></el-table-column>
                <el-table-column prop="specification" label="规格/批准文号/厂商" align="center">
                <template slot-scope="scope">
                    {{scope.row.specification || ''}}
                </template>
                </el-table-column>
                <el-table-column prop="packageNum" label="最小购买数量" align="center"></el-table-column>
                <el-table-column prop="purchasedPrice" label="采购价" align="center"></el-table-column>
                <el-table-column prop="retailPrice" label="零售价" align="center"></el-table-column>
                <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.createTime && $normalTime(scope.row.createTime) || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        {{scope.row.status == 'display' && '上架' || '下架'}}
                    </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="160px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="clock(scope.row)">{{scope.row.status == 'display' ? '下架' : '上架'}}</el-button>
                        <el-button type="text"  @click="editer(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
        </elTable>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
export default {
    name: 'goodsLibrary',
    components: {elTable},
    data () {
        return {
            searchArray: [
                {
                    type: "input",
                    placeholder: "请输入商品名称",
                    types: "text",
                    value: "",
                    key: 'name',
                    label: "商品名称"
                },
                {
                    type: "input",
                    placeholder: "请输入批准文号",
                    types: "text",
                    value: "",
                    label: "批准文号",
                    key: 'approvalNumber'
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '商品状态',
                    key: 'status',
                    list: [
                    ]
                },
                {
                    type: "sectionValue",
                    value1: "",
                    value2: "",
                    label: "价格区间",
                    unit: "￥",
                    key1: "startPurchasedPrice",
                    key2: "endPurchasedPrice"
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '商品类型',
                    key: 'type',
                    list: [
                    ]
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '商品一级分类',
                    key: 'bigCategory',
                    list: [
                    ]
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '商品二级分类',
                    key: 'smallCategory',
                    list: [
                    ]
                },
            ],
            formData: {
                currentPage: 1,
                pageSize: 5,
                total: 0,
                data: []
            },
            searchObj: {
                smallCategory: '',
                bigCategory: '',
                type: '',
                startPurchasedPrice: '',
                endPurchasedPrice: '',
                status: '',
                approvalNumber: '',
                name: ''
            }
        }
    },
    created () {
        // this.getList()
    },
    methods: {
        getList(status = true) {
            if (!status) this.formData.currentPage = 1
            const {searchObj, formData: {currentPage, pageSize}} = this
            this.$loading(true)
            let param = {}
            param = {
                currentPage,
                pageSize,
            }
            for (let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.goods.getGoodsList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data && r.data.total || 0
            }).finally(() => {
                this.$loading(false)
            })
        },
        clock (item) {
            this.$confirm(`您确定要${item.status == 'display' ? '下架' : '上架'}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let param = {}
                    param = {
                        id: item.id,
                        status: item.status == 'hide' ? 'dislay' : 'hide'
                    }
                    this.$loading(true)
                    this.$api.goods.putChangeStatus(param).then(r => {
                        this.getList()
                    }).finally(() => {
                        this.$loading(false)
                    })
                }).catch(() => {
            })
        },
        deleteUser () {
            this.$confirm('确定要删除该角色么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        editer () {

        }
    }
}
</script>
<style lang="scss" scoped>
.goods-library {
    .search-form {
        margin-bottom: 15px;
    }
}
</style>